<template>
  <div class="app-main">
    <div class="operation-contain">
      <div class="operation-left">
        <el-input v-model="list.filters.search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" size="medium" @input="getSearch"></el-input>
      </div>
    </div>
    <div class="list-contain">
      <div class="contain-item item-list" v-for="(item, index) in list.data" :key="index">
        <div class="item-header">{{ item.name }}</div>
        <div class="item-desc">{{ item.desc }}</div>
        <div class="item-tag">
          <template v-for="(tag, index) in item.skill.split(',')">
            <el-tag size="small" :key="index" v-if="tag !== ''">{{ tag }}</el-tag>
          </template>
        </div>
        <div class="item-type">
          <span>项目类别：{{ item.type === 1 ? '个人项目' : item.type === 2 ? '外包项目' : '内部项目' }}</span>
          <span>项目状态：{{ item.status === 1 ? '开始' : item.status === 2 ? '暂停' : '关闭' }}</span>
          <span v-perms="'info:project:download'">
            源代码：
            <i class="el-icon-download" @click="download(item)" v-if="item.path !== ''"></i>
            <span v-else>暂无</span>
          </span>
        </div>
        <div class="item-path">
          项目部署地址：<el-link v-if="item.url !== ''" :underline="false" :href="item.url" target="_blank">{{ item.url.substring(0, 30) + '...' }}</el-link>
          <span v-else>暂无地址</span>
        </div>
        <div>
          <el-button v-perms="'info:projectImage:list'" size="mini" type="primary" class="el-icon-picture-outline" @click="goImage(item.id)"> 图集</el-button>
          <el-button v-perms="'info:projectDocument:list'" size="mini" type="primary" @click="goDoc(item.id)" class="el-icon-document"> 文档</el-button>
          <el-button v-perms="'info:projectTask:list'" size="mini" type="primary" class="el-icon-finished" @click="task(item.id)"> 任务</el-button>
          <el-button v-perms="'info:project:update'" size="mini" type="primary" @click="edit(item.id)" class="el-icon-edit"></el-button>
          <el-button v-perms="'info:project:delete'" size="mini" type="primary" @click="confirmDelete(item.id)" class="el-icon-delete"></el-button>
        </div>
      </div>
      <div class="contain-item item-add" @click="goAdd" v-perms="'info:project:add'">
        <i class="el-icon-circle-plus-outline item-add-icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Project',
  data () {
    return {
      list: {
        data: [],
        loading: false,
        filters: {
          search: '',
          prop: '',
          order: ''
        }
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    goAdd () {
      this.$router.push({ path: '/info/project/add' })
    },
    getSearch () {
      this.getList()
    },
    getList () { // 获取列表
      this.list.loading = true
      this.$API({
        name: 'GetProjectList',
        params: {
          search: this.list.filters.search,
          order: this.list.filters.prop,
          sort: this.list.filters.order
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          this.list.total = res.data.data.count
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    confirmDelete (id) { // 删除
      this.$confirm('此操作将删除此项目及信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$API({
          name: 'DeleteProject',
          paths: [id],
          requireAuth: true
        }).then (res => {
          if (res.data.code === 200 && res.data.data === 1) {
            this.$message.success(res.data.msg)
          } else {
            this.$message.error(res.data.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        }).finally(() => {
          this.getList()
        })
      }).catch(() => {
      })
    },
    goImage (id) {
      this.$router.push({  path: `/info/project/image/${id}` })
    },
    goDoc (id) {
      this.$router.push({  path: `/info/project/doc/${id}` })
    },
    edit (id) {
      this.$router.push({  path: `/info/project/edit/${id}` })
    },
    task (id) {
      this.$router.push({  path: `/info/project/task/${id}` })
    },
    download (row) { // 下载
      this.$API({
        name: 'DownloadProject',
        params: {
          path: row.path,
          token: this.$Cookies.get('token')
        },
        headers: {
          'Content-Type': 'application/octet-stream'
        },
        requireAuth: true
      }).then (res => {
        window.open(`${res.config.url}?path=${res.config.params.path}&token=${res.config.params.token}`, '_self')
      }).catch(error => {
        this.$message.error(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  .list-contain {
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .contain-item {
      width: 400px;
      padding: 10px;
      margin: 10px 10px 10px 10px;
      border-top: 7px solid #23b7e5;
      height: 240px;
      border-radius: 4px;
      transition: 0.3s;
      border-left: 1px solid #3ecffc;
      border-bottom: 1px solid #3ecffc;
      border-right: 1px solid #3ecffc;
      cursor: pointer;
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
    .item-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      .item-header {
        margin-bottom: 10px;
        color: #777;
        font-size: 20px;
      }
      .item-desc {
        width: 100%;
        color: #666;
        margin-bottom: 5px;
        height: 40px;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        overflow: hidden;
        -webkit-box-orient: vertical;
      }
      .item-tag {
        margin-bottom: 10px;
        width: 100%;
        height: 25px;
        text-align: center;
        overflow-y: auto;
        .el-tag {
          margin-bottom: 1px;
        }
      }
      .item-type {
        margin-bottom: 5px;
        width: 100%;
        font-size: 14px;
        color: #888;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      .item-path {
        width: 100%;
        font-size: 14px;
        margin-bottom: 5px;
        color: #888;
        .el-link--inner {
          display: inline-block;
          width: 100%;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
        }
      }
    }
    .item-add {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 120px;
      color: #e7e7e7;
      &:hover {
        transform: translateY(-10px);
        color: #23b7e5;
      }
    }
  }
}
</style>